<template>
  <div>
     <div class="btn-group" role="group" aria-label="Basic example">
      <button type="button" :class="active===0 ? 'btn btn-primary' : 'btn-secondary'" @click="activebt(0)">全部</button>
      <button type="button" :class="active===1 ? 'btn btn-primary' : 'btn-secondary'" @click="activebt(1)">已完成</button>
      <button type="button" :class="active===2 ? 'btn btn-primary' : 'btn-secondary'" @click="activebt(2)">未完成</button>
    </div>  </div>
</template>

<script>
export default {
    name:'TodoButton',
    emits:['update:active'],
    props:{
      active:{
        type:Number,
        required:true,
        default:0
      }
    },
    methods:{
      activebt(e){
        if(e==this.active)return  
        this.$emit('update:active',e)
      }
    }

}
</script>

<style>

</style>